<template>
  <t-table
    class="plugin-goods-outbound-info-table"
    row-key="id"
    table-layout="auto"
    :data="data.goods"
    :columns="columns"
    hover
  >
    <template #name="{ row }">
      <b>{{ row.goods_name }}</b>
    </template>
    <template #count="{ row }">
      <t-tag theme="primary" variant="light">{{ row.count }}</t-tag>
    </template>
  </t-table>
</template>
<script setup>
  import app from '@/app'
  import index from '../../../index'

  const props = defineProps(['data'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('outbound.goods.code'),
    colKey: 'goods_code'
  }, {
    title: plugin.t('outbound.goods.name'),
    colKey: 'goods_name',
    cell: 'name'
  }, {
    title: plugin.t('outbound.goods.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-goods-outbound-info-table{
    .total{
      color: $color;
      font-weight: bold;
      text-align:center
    }
  }
</style>